<template>
	<n-popover trigger="hover" placement="right" :disabled="layoutStore.menuOpen">
		<template #trigger>
			<div
				class="h-[40px] mb-[6px] flex items-center app-bg-react duration-200 rounded-lg"
				:class="[bgClass, layoutStore.menuOpen ? 'p-[12px]' : 'p-[10px]']"
				@click.prevent="onHeaderClick">
				<template v-if="data?.iconType === 'network'">
					<img :src="data.icon" />
				</template>
				<template v-else>
					<base-icon
						v-if="data.icon"
						:name="data.icon"
						class="text-[20px] text-t-1"
						:class="isActive ? 'text-t-1' : isOpen ? 'text-t-1' : 'text-t-1'"></base-icon>
					<div v-else class="w-5 h-5 rounded-lg bg-t-3 shrink-0"></div>
				</template>

				<transition
					enter-active-class="animate__animated animate__fadeIn"
					leave-active-class="animate__animated animate__fadeOut">
					<div
						v-if="layoutStore.menuOpen || !isDesktop"
						class="flex-1 flex justify-between items-center">
						<base-text
							class="ml-2 text-nowrap text-t-1 word-spacing__primary"
							:text="data.id === 'language' ? (selectedLang as any) : data.text"
							:textT="data.textT" />
						<base-icon
							v-if="data.children?.length"
							name="expandarrow"
							class="text-[20px] duration-300"
							:class="[
								{
									'rotate-90': isOpen
								},
								isOpen || isActive ? 'text-white' : 'text-bg-4'
							]"
							@click.prevent.stop="onIconClick" />
						<base-icon
							v-if="data.id === 'language'"
							name="expandarrow"
							class="text-[20px] text-bg-4 duration-300"></base-icon>
					</div>
				</transition>
			</div>
		</template>
	</n-popover>
</template>

<script lang="ts" setup>
import { NPopover } from 'naive-ui'
import { BaseIcon, BaseText } from '@/components/base/'
import { PropType, computed } from 'vue'
import { MenuItemType } from './types'
import { isDesktop } from '@/hooks'
import { bus } from '@/utils'
import {
	useLayoutStore,
	useAppStore,
	useProfileStore,
	useWalletStore,
	useAccountStore
} from '@/store'
import { useRoute, useRouter } from 'vue-router'
import { getLangList, customerService, todo } from '@/utils'

const props = defineProps({
	data: {
		type: Object as PropType<MenuItemType>,
		required: true
	}
})

const profileStore = useProfileStore()
const appStore = useAppStore()
const layoutStore = useLayoutStore()
const walletStore = useWalletStore()
const accountStore = useAccountStore()

const selectedLang = computed(() => {
	const obj = getLangList().find((x) => x.id === appStore.lang) as any
	return obj.text
})
const bgClass = computed(() => {
	if (isActive.value) {
		return '!bg-primary'
	} else if (isOpen.value) {
		return 'bg-bg-3'
	} else {
		return ''
	}
})

const route = useRoute()
const router = useRouter()

const isOpen = computed(() => props.data.id === layoutStore.menuGroupOpen)

const isActive = computed(() => {
	if (route.fullPath === '/') {
		return false
	}
	if (route.matched.some((item) => item.name === props.data.name)) {
		// TODO 当前路由与子路由的高亮匹配，这里一行代码就可以了;
		// TODO props.data.name 表示路由的name; 就能匹配到包含所有子路由
		return true
	}
	if (route.name === props.data.name) {
		return true
	}
	if (route.meta.category === props.data.name) {
		return true
	}
	if (route.params?.id === props.data.name && route.name === 'casinoTags') {
		return true
	}
	if (route.fullPath === props.data.path) {
		return true
	}
	if (route.params.game === props.data.name) {
		return true
	}
	if (route.path === props.data.path && !props.data.children?.length) {
		return true
	}
	if (props.data.path && route.path.startsWith(props.data.path + '/')) {
		return !props.data.children?.length || '' === layoutStore.menuGroupOpen
	}
	if (
		props.data.includePaths &&
		props.data.includePaths.length &&
		props.data.includePaths.indexOf(route.fullPath) > -1
	) {
		return true
	}
	return false
})

const onIconClick = () => {
	if (props.data.children?.length) {
		layoutStore.setMenuGroupOpen(props.data.id === layoutStore.menuGroupOpen ? '' : props.data.id)
	}
}

const handleScrollToSlotContent = () => {
	const slotDom = document.getElementById('game-list__content__slot')
	bus.$emit('SCROLLTOP', {
		y: slotDom?.offsetTop
	})
}

const onHeaderClick = () => {
	const currentLocale = appStore.lang

	if (props.data.needLogin && !accountStore.isLogin) {
		accountStore.showLogin()
		return
	}
	if (props.data.todo) {
		todo()
		return
	}
	if (props.data.children?.length) {
		layoutStore.setMenuGroupOpen(props.data.id === layoutStore.menuGroupOpen ? '' : props.data.id)
	}
	// if (props.data.type) {
	// 	//layoutStore.setMenuType(props.data.type)
	// 	debugger
	// 	layoutStore.setMenuGroupOpen(props.data.id === layoutStore.menuGroupOpen ? '' : props.data.id)
	// 	//layoutStore.setMenuGroupOpen(props.data.id)
	// }
	if (props.data.needLogin && !accountStore.isLogin) {
		accountStore.showLogin()
		return
	}
	if (props.data.id === 'waiter') {
		customerService()
		return
	} else if (props.data.id === 'language') {
		appStore.showLanguage(true)
		return
	} else if (props.data.id === 'report') {
		profileStore.setReportShow(true)
		return
	} else if (props.data.id === 'settings') {
		// appStore.showSetting(true)
		router.push({ name: 'settings' })
		return
	} else if (props.data.id === 'deposit') {
		walletStore.setWalletDepositShow(true)
		return
	} else if (props.data.id === 'withdraw') {
		walletStore.setWalletWithdrawShow(true)
		return
	}
	// else if (props.data.id === 'profile') {
	// 	profileStore.showProfile({
	// 		show: true,
	// 		userId: profileStore.userInfo?.userId
	// 	})
	// 	return
	// }
	if (props.data.path) {
		// console.log(props.data)
		// handleScrollTop()
		//router.push(props.data.path)
		router.push(`/${currentLocale}${props.data.path}`)
		if (
			(route.name === 'SlotsItem' &&
				props.data.path.startsWith('/slots') &&
				props.data.path !== '/slots-provider') ||
			(route.name === 'CasinoItem' &&
				props.data.path.startsWith('/casino') &&
				props.data.path !== '/casino-provider')
		) {
			handleScrollToSlotContent()
		}
	}
}
</script>
